<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import service from "~/service";
import { ElMessageBox, ElMessage } from 'element-plus'
import BusinessMan from "./BusinessMan.vue";

const query = reactive({
    name: '',
    phoneNumber: '',
    accountStatus: ''
})

const page = reactive({
    pageIndex: 1,
    pageSize: 10,
})

const tableData = ref([])
const pageTotal = ref(0)
const tableMaxHeight = ref(300)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const loading = ref('')
const isEdit = ref(false)
const accountStatusList = ref([{ label: '正常', value: '1' }, { label: '已冻结', value: '2' }])
const map: any = { '1': '正常', '2': '已冻结' }
const account = ref('')
onBeforeMount(async () => {
    tableMaxHeight.value = document.body.clientHeight - 242;
    const res = await service.business.getMemberList(query, page);
    if (res.code === 200 && res.data && res.data.list instanceof Array) {
        tableData.value = res.data.list.map((item: any) => {
            return {
                ...item,
                accountStatus: '1',
            }
        });
        pageTotal.value = res.data.total;
    }

})

const handleShowDialog = (edit?: boolean, data?: any) => {
    isEdit.value = edit || false;
    const title = isEdit.value ? '编辑员工账号' : '添加员工账号';
    dialogTitle.value = title;
    if (!isEdit.value) {
        isBusinessAccount().then(res => {
            if (res) {
                getAccount()
                dialogVisible.value = true;
            } else {
                ElMessage({
                    type: 'warning',
                    message: '企业用户才能添加业务员',
                })
            }
        })
    } else {
        dialogVisible.value = true;
    }
}

const handleDelete = async () => {
    try {
        await ElMessageBox.confirm('确定要删除该成员吗？',
            '提醒',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
        console.log(1111)
    } catch (error) {
        console.log(22222)
    }

}

const handleFreeze = async () => {
    try {
        await ElMessageBox.confirm('确定要冻结该成员吗？',
            '提醒',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
        console.log(1111)
    } catch (error) {
        console.log(22222)
    }

}

const handleConfirm = () => {
    dialogVisible.value = false;
}

const getAccount = async () => {
    const res = await service.business.generateBusinessAccount()
    if (res.code === 200) {
        account.value = res.data || ''
    } else {
        account.value = ''
    }
}

const isBusinessAccount = () => {
    return new Promise(resolve => {
        let result = false
        service.business.isBusinessAccount().then(res => {
            if (res.data && res.data.businessType === 1) {
                result = true
            }
        }).finally(() => {
            resolve(result)
        })
    })
}

</script>

<template>
    <div class="full-flex-column-layout business">
        <div class="operation">
            <el-form :inline="true" class="form">
                <el-form-item label="用户名：">
                    <el-input v-model="query.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="query.phoneNumber" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="账户状态：">
                    <el-select v-model="query.accountStatus" placeholder="请选择账户状态">
                        <el-option
                            v-for="item in accountStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleShowDialog()">添加业务员</el-button>
                </el-form-item>
            </el-form>
            <div class="button-group">
                <el-button>重 置</el-button>
                <el-button type="primary">查 询</el-button>
            </div>
        </div>
        <div class="space"></div>
        <div class="content" v-loading="loading" element-loading-text="数据加载中. . .">
            <el-table :data="tableData" stripe :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column type="index" width="50" />
                <el-table-column prop="username" label="账号" width="200" />
                <el-table-column prop="fullName" label="用户名" width="200" />
                 <el-table-column prop="inviteCode" label="邀请码" width="200" />
                <el-table-column prop="mobile" label="手机号码" width="200" />
                <el-table-column prop="employmentDate" label="入职日期" width="200" />
                <el-table-column prop="accountStatus" label="账户状态" width="200">
                    <template #default="{ row }">
                        <span
                            :class="{ success: row.accountStatus === '1', error: row.accountStatus === '2' }"
                        >{{ map[row.accountStatus] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="150">
                    <template #default="{ row }">
                        <div class="table-operation">
                            <!-- <el-button
                                v-if="row.accountStatus === '1'"
                                type="primary"
                                @click="handleFreeze"
                            >冻 结</el-button> -->
                            <!-- <div
                                v-if="row.accountStatus === '1'"
                                class="text left"
                                @click="handleShowDialog(true, row)"
                            >编 辑</div> -->
                            <!-- <div
                                v-if="row.accountStatus === '2'"
                                class="text error"
                                @click="handleDelete"
                            >删 除</div> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next, sizes, jumper" :total="pageTotal"></el-pagination>
            </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            :close-on-click-modal="false"
            width="580px"
        >
            <business-man :account="account" @confirm="handleConfirm"></business-man>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.business {
    .form {
        :deep(.el-form-item) {
            margin-bottom: 0px;
        }
        :deep(.el-range-editor .el-range-input) {
            background-color: #f8f8f8;
        }
    }
    .left {
        margin-left: 24px;
    }
    .pagination {
        display: flex;
        padding-top: 18px;
        justify-content: flex-end;
    }
}
</style>
